<template>
    <el-upload 
        v-model:file-list="fileList" 
        :action="url"
        multiple
        :on-success="onSuccess"
        :on-error="onError"
        :before-upload="beforeUpload"
        :on-progress="onProgress"
        :show-file-list="false"
        :drag="false"
        :limit="1">
        <el-button type="primary">点击上传</el-button>
        {{ modelValue && modelValue > 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已上传-'+modelValue : ''}}
        {{ jindu != 0 && jindu != 100 ? '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上传中-'+jindu+"%" : '' }}
    </el-upload>
</template>


<script>
import func from '../config/func';
import conf from '../config/init.js'
export default {
    props:["modelValue"],
    emits:["update:modelValue"],
    data() {
        return {
            url: conf.domains['gin'] + "front/file/upload",
            fileList:[],
            jindu: 0,
        }
    },
    methods:{
        onSuccess(res){
            if(res.code == 0){
                // 上传成功
                if(res.request.file.id > 0){
                    this.$emit("update:modelValue",res.request.file.id)
                    this.$data.fileList = []
                } else {
                    func.notify("文件上传失败","原因：上传文件ID未找到")
                    this.$data.fileList = []
                }
            } else {
                func.notify("文件上传失败","原因："+res.msg)
                this.$data.fileList = []
            }
            console.log("success",res)
        },
        // 上传失败
        onError(res){
            func.notify("文件上传失败",res)
        },
        // 上传前
        beforeUpload(res){
            this.$emit("update:modelValue",0)
        },
        // 上传时
        onProgress(res){
            this.$data.jindu = res.percent.toFixed(2)
        }
    },
}
</script>